import styled from "@emotion/styled";
import { ButtonNoPadding, Row } from "components/lib";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Index } from "./index";
import { Hots } from "../hots";
import { Label } from "../label";
import { Article } from "../article";
import { ReactComponent as SoftwareLogo } from "images/logo.svg";
import { DynamicMenu } from "./menu";

export const AuthenticatedApp = () => {
  const menuData = [
    {
      key: "/hots",
      path: "/hots",
      text: "热门搜索",
    },
    {
      key: "/label",
      path: "/label",
      text: "标签",
    },
    {
      key: "/unimportance",
      text: "非核心",
      path: "#",
      sub: [
        {
          key: "/unimportance/links",
          path: "/unimportance/links",
          text: "友情链接",
        },
        {
          key: "/unimportance/adivertisement",
          path: "/unimportance/adivertisement",
          text: "广告",
        },
      ],
    },
    {
      key: "/article",
      path: "/article",
      text: "文章",
    },
  ];
  return (
    <Container>
      <Router>
        <PageHeader />
        <Aside>
          <DynamicMenu options={menuData} />
        </Aside>
        <Main>
          <Routes>
            <Route path={"/"} element={<Index />} />
            <Route path={"/hots"} element={<Hots />} />
            <Route path={"/label"} element={<Label />} />
            <Route path={"/article"} element={<Article />} />
          </Routes>
        </Main>
      </Router>
    </Container>
  );
};

const PageHeader = () => {
  const resetRoute = () => {
    window.location.href = window.location.origin;
  };
  return (
    <Header between={true}>
      <HeaderLeft gap={1}>
        <ButtonNoPadding type={"link"} onClick={resetRoute}>
          <SoftwareLogo
            width={"18rem"}
            height={"3.2rem"}
            color={"rgb(38, 132, 255)"}
          />
        </ButtonNoPadding>
      </HeaderLeft>
      <HeaderRight></HeaderRight>
    </Header>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  grid-template-columns: 16rem 1fr;
  grid-template-areas:
    "header header"
    "aside main";
  grid-gap: 1rem;
  height: 100vh;
`;

// grid-area 用来给grid子元素起名字
const Header = styled(Row)`
  grid-area: header;
  padding: 3.2rem 1rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)`
  display: flex;
  align-items: center;
`;

const HeaderRight = styled.div``;
const Aside = styled.aside`
  background-color: rgb(244, 245, 247);
  height: 100vh - 3.2rem;
`;
const Main = styled.main`
  box-shadow: -5px 0 5px -5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  overflow: scroll;
`;
